@import '../config/import';

.crayons-title,
.crayons-subtitle-1,
.crayons-subtitle-2,
.crayons-subtitle-3 {
  font-weight: var(--fw-bold);
  color: var(--base-90);
  line-height: var(--lh-tight);

  @media (min-width: $breakpoint-s) {
    line-height: var(--lh-base);
  }
}

.crayons-title {
  color: var(--base-100);
  font-size: var(--fs-2xl);
  display: inline-flex;
  min-height: 40px;
  align-items: center;

  @media (min-width: $breakpoint-s) {
    font-size: var(--fs-3xl);
  }
}

.crayons-subtitle-1 {
  font-size: var(--fs-xl);
  @media (min-width: $breakpoint-s) {
    font-size: var(--fs-2xl);
  }
}

.crayons-subtitle-2 {
  font-size: var(--fs-l);
  @media (min-width: $breakpoint-s) {
    font-size: var(--fs-xl);
  }
}

.crayons-subtitle-3 {
  font-size: var(--fs-base);
}
